<template>
	<view style="text-align: center;padding: 20rpx;">
		<image src="../../static/logo.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;margin: 10rpx auto;">
		</image>
		<!-- 用户类型选择 -->
		<view class="tabs">
			<view :class="a==0?'tabs-item tabs-item_zhong':'tabs-item'" @click="a=0">个人用户</view>
			<view :class="a==1?'tabs-item tabs-item_zhong':'tabs-item'" @click="a=1">企业用户</view>
		</view>
		<!-- 登录方式 -->
		<view v-if="b==0">
			<!-- 手机验证码登录 -->
			<view style="font-size: 30rpx;text-align: left;padding: 20rpx;line-height: 70rpx;">
				<text style="font-size: 50rpx;font-weight: 550;">手机验证登录</text><br />
				<text>欢迎使用预约访客app</text><br />

				<!-- 手机号提示输入 -->
				<text style="margin: 30rpx 0 10rpx 0;display: block;">手机号码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;">
					<text style="width: 15%;margin-left: 20rpx;">+86 |</text>
					<input v-model="user.phone" style="font-size: 30rpx;width: 100%;" type="text"
						placeholder="请输入手机号码" />
				</view>

				<!-- 验证码提示输入 -->
				<text style="line-height: 80rpx;">验证码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;height: 70rpx;">
					<input v-model="user.testcode" style="font-size: 30rpx;width: 70%;margin-left: 20rpx;" type="text"
						placeholder="请输入验证码" />
					<view style="width: 30%;">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
						<u-button style="background-color: #f2f7fb;border: none;color: #2984f8;" @tap="getCode"
							:text="tips" type="success" size="mini"></u-button>
					</view>
				</view>

				<!-- 用户协议选择 -->
				<view style="display: flex;justify-content: space-between;margin: 20rpx 0;">
					<view style="display: flex;justify-content: flex-start;">
						<u-checkbox-group placement="row">
							<u-checkbox @change="checkbox" activeColor="#2778ff" labelSize="10" label="我已阅读并同意">
							</u-checkbox>
						</u-checkbox-group>
						<text style="font-size: 10px;color: #007AFF;">《用户隐私政策》</text>
					</view>
				</view>

				<!-- 登录按钮和其他操作入口 -->
				<button @click="loginInfo" type="default" style="background-color: #007AFF;color: #ffffff;">登录</button>
				<view style="display: flex;justify-content: space-between;color: #007AFF;margin-top: 20rpx;">
					<text @click="b=1">账号密码登录</text>
					<text @click="toRegister">注册新用户</text>
				</view>
			</view>
		</view>
		<view v-if="b==1">
			<!-- 账号密码登录 -->
			<view style="font-size: 30rpx;text-align: left;padding: 20rpx;line-height: 70rpx;">
				<text style="font-size: 50rpx;font-weight: 550;">账号密码登录</text><br />
				<text>欢迎使用预约访客</text><br />

				<!-- 手机号提示输入 -->
				<text style="margin: 30rpx 0 10rpx 0;display: block;">手机号码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;">
					<text style="width: 15%;margin-left: 20rpx;">+86 |</text>
					<input v-model="user.phone" style="font-size: 30rpx;width: 100%;" type="text"
						placeholder="请输入手机号码" />
				</view>

				<!-- 密码提示输入 -->
				<text style="line-height: 80rpx;">密码</text>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;padding: 10rpx;background-color: #f2f7fb;border-radius: 20rpx;height: 70rpx;">
					<input v-model="user.password"
						style="line-height: 70rpx;font-size: 30rpx;width: 70%;margin-left: 20rpx;" type="password"
						placeholder="请输入密码" />
				</view>

				<!-- 用户协议选择 和 忘记密码入口 -->
				<view style="display: flex;justify-content: space-between;margin: 20rpx 0;">
					<view style="display: flex;justify-content: flex-start;">
						<u-checkbox-group placement="row">
							<u-checkbox @change="checkbox" activeColor="#d9001b" labelSize="10" label="我已阅读并同意">
							</u-checkbox>
						</u-checkbox-group>
						<text style="font-size: 10px;color: #d9001b;">《用户隐私政策》</text>
					</view>
					<text @click="toForgetPassword">忘记密码？</text>
				</view>

				<!-- 登录按钮和其他操作入口 -->
				<button @click="loginInfo" type="default" style="background-color: #d9001b;color: #ffffff;">登录</button>
				<view style="display: flex;justify-content: space-between;color: #d9001b;margin-top: 20rpx;">
					<text @click="b=0">手机验证登录</text>
					<text @click="toRegister">注册新用户</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0, //判断用户类型参数 0:个人，1:企业
				b: 0, //判断登录方式参数 0:验证，1:密码
				tips: '', //验证码参数
				value: '', //验证码参数
				checkboxChecked: false, // 用户协议选中判定参数
				user: { //登录参数
					phone: '',
					testcode: '',
					password: ''
				}
			}
		},
		methods: {
			// 登录
			loginInfo() {
				console.log(this.user);
				if (this.user.phone.length == 0) {
					uni.$u.toast('请输入手机号')
				} else if (this.user.password.length == 0 && this.b == 1) {
					uni.$u.toast('请输入密码')
				} else if (this.user.testcode.length == 0 && this.b == 0) {
					uni.$u.toast('请输入验证码')
				} else if (!this.checkboxChecked) {
					uni.$u.toast('同意用户协议后才可以登录！')
				} else {
					console.log(this.a);
					if (this.a == 0) {
						// 个人用户登录接口

						// 成功回调
						uni.setStorage({
							key: 'a',
							data: this.a
						})
						uni.switchTab({
							url: '../home/home'
						})
					} else {
						// 企业用户登录接口

						// 成功回调
						uni.setStorage({
							key: 'a',
							data: this.a
						})
						uni.switchTab({
							url: '../home/home'
						})
					}
				}
			},
			// 前往注册页
			toRegister() {
				uni.navigateTo({
					url: '../register/register?a=' + this.a
				})
			},
			// 前往忘记密码页
			toForgetPassword() {
				uni.navigateTo({
					url: '../forgetPassword/forgetPassword?a=' + this.a
				})
			},
			// 用户协议选中判定
			checkbox() {
				this.checkboxChecked = !this.checkboxChecked
			},
			// 验证码操作  下3
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style>
	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		line-height: 80rpx;
		border-bottom: #e6e6e6 1rpx solid;
	}

	.tabs-item {
		width: 100%;
		margin-bottom: 5rpx;
	}

	.tabs-item_zhong {
		border-bottom: #00a0ef 5rpx solid;
		margin: 0;
	}
</style>
